<template>
  <div class="pageAll">
    <div class="pageContent">
      <div id="tabApp" class="header__box swiper-container1">
        <ul class="header__warp swiper-wrapper" ref="swiperWrapper">
          <li
            class="t swiper-slide"
            v-for="(item, index) in routerData"
            :class="{
              active: $route.path == item.path,
            }"
            :key="index"
            @click="tabFn(item.path)"
          >
            {{ item.name }}
          </li>
        </ul>
      </div>

      <div class="page-body">
        <keep-alive>
          <router-view v-if="$route.meta.keepAlive"></router-view>
        </keep-alive>
        <router-view v-if="!$route.meta.keepAlive"></router-view>
      </div>
    </div>
  </div>
</template>

<script>
import "./assets/css/common/common.scss";
import "./assets/css/common/app.scss";

import Vue from "vue";
import Router from "vue-router";

import "swiper/dist/css/swiper.min.css";
import Swiper from "swiper";

export default {
  name: "app",
  data: function () {
    return {
      title: "",
      path: "",
      routerData: [
          {
              id: 22,
              path: "/copyandEye",
              name: "copy与eye"
          },
          {
            id: 8,
            path: "/barrage",
            name: "mecscroll与swiper各自分页",
          },


        {
          id: 17,
          path: "/selAddTr",
          name: "sel表单增行",
        },

        {
          id: 20,
          path: "/pdfh5",
          name: "pdfh5",
        },
        {
          id: 21,
          path: "/filterData",
          name: "mt-loadmore分页swiper及pupop",
        },
        {
          id: 19,
          path: "/pdfjs",
          name: "pdfjs",
        },
        {
          id: 18,
          path: "/savePhoto",
          name: "savePhoto",
        },

        {
          id: 16,
          path: "/searchInput",
          name: "搜索文字过滤",
        },
        {
          id: 15,
          path: "/waterMark",
          name: "H5水印",
        },
        {
          id: 7,
          path: "/drag",
          name: "swiper全屏",
        },
        {
          id: 13,
          path: "/vuefullPage",
          name: "vuefullPage全屏滚动使用",
        },
        {
          id: 12,
          path: "/showPdf",
          name: "pdf展示-swiper",
        },
        {
          id: 14,
          path: "/readPdf",
          name: "pdf一屏幕展示",
        },
        {
          id: 11,
          path: "/playMusicIndex",
          name: "播放音乐",
        },
        {
          id: 0,
          path: "/bigWheel",
          name: "抽奖大转盘-x",
        },
        {
          id: 1,
          path: "/swipterEffects",
          name: "swipter双层联动",
        },
        {
          id: 2,
          path: "/zan",
          name: "点赞",
        },
        {
          id: 3,
          path: "/chartDemo",
          name: "各种图表",
        },
        {
          id: 4,
          path: "/pk",
          name: "PK",
        },
        {
          id: 5,
          path: "/notes",
          name: "笔记",
        },
        {
          id: 6,
          path: "/dataObj",
          name: "dataObj",
        },


        {
          id: 9,
          path: "/vueScroll",
          name: "Vue无缝滚动+点赞效果",
        },
        {
          id: 10,
          path: "/listIndex",
          name: "列表-x",
        },
      ],
      // swiper
      currentId: 0,
      mySwiper: null, //swiper实例
      swiperWidth: 0, //swiper可视宽度
      maxTranslate: "", //最大的滑动距离
      maxWidth: "",
      // tab元素
      slide: {
        offsetLeft: 0,
        clientWidth: 0,
      },
      slideLeft: 0,
      slideWidth: 0,
      slideCenter: 0,
      nowTlanslate: 0,
      // swiper内容区
      pageSwiper: {},
    };
  },
  watch: {
    $route: function (to, from) {
      // 设置app版本号、
      if (this.$splitUrl()["appVersion"]) {
        this.setAppVersion(this.$splitUrl()["appVersion"]);
      }
      if (this.$utils.getParams(this, "isIphoneX")) {
        this.setParamsIsIphoneX(this.$utils.getParams(this, "isIphoneX"));
      } else if (this.$utils.getParams(this, "hairHeight")) {
        this.setParamsHairHeight(this.$utils.getParams(this, "hairHeight"));
      }
    },
  },
  computed: {},
  methods: {
    tabFn(path) {
      this.path = path;
      this.$router.push({
        path: this.path,
      });
      console.log(path, this.path);
    },
  },
  mounted() {
    var that = this;

    setTimeout(() => {
      that.path = that.$route.path;
    }, 300);
    that.mySwiper = new Swiper("#tabApp", {
      freeMode: true,
      freeModeMomentumRatio: 0.5,
      slidesPerView: "auto",
      resistanceRatio: 0.7,
      on: {
        tap: function (swiper) {
          that.swiperWidth = that.$refs.swiperWrapper.clientWidth;
          that.maxTranslate = that.mySwiper.maxTranslate();
          that.maxWidth = -that.maxTranslate + that.swiperWidth / 2;
          if (that.currentId == that.routerData[this.clickedIndex].id) {
            return;
          }
          that.currentId = that.routerData[this.clickedIndex].id;
          that.slide = this.slides[this.clickedIndex];
          that.slideLeft = that.slide.offsetLeft;
          that.slideWidth = that.slide.clientWidth;
          that.slideCenter = that.slideLeft + that.slideWidth / 2;
          that.mySwiper.setTransition(300);
          if (that.slideCenter < that.swiperWidth / 2) {
            that.mySwiper.setTranslate(0);
          } else if (that.slideCenter > that.maxWidth) {
            that.mySwiper.setTranslate(that.maxTranslate);
          } else {
            var nowTlanslate = that.slideCenter - that.swiperWidth / 2;
            that.mySwiper.setTranslate(-nowTlanslate);
          }
        },
      },
    });
  },
};
Router.goPath = function (path) {
  window.location.hash = "#" + path;
};
</script>
<style lang="less">
.Cont {
  overflow: auto;
}

.page-body {
  background-color: white;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-flex: 1;
  -ms-flex-positive: 1;
  -ms-flex: 1;
  flex: 1;
  overflow: auto;
  width: 100%;
  margin-top: 0.5rem;
}

.page-body .container {
  width: 100%;
  height: max-content;
}

.header__box {
  display: flex;
  min-width: 7.5rem;
  justify-content: space-between;
}

.header__box .header__warp {
  width: 100%;
  height: 1rem;
  line-height: 1rem;
}

.header__box .header__warp ul {
  display: flex;
  overflow: auto;
  position: fixed;
  background: #efefef;
  height: 1rem;
  line-height: 1rem;
  z-index: 999;
}

.header__box .header__warp ul .t {
  text-align: center;
  font-size: 0.18rem;
  color: #484848;
  margin-bottom: 0.2rem;
  cursor: pointer;
  margin: 0 0.1rem;
  white-space: nowrap;
  padding: 0 0.1rem;
}

.header__box .header__warp ul .t.active {
  position: relative;
  background: #a10d30;
  color: #fff;
}

.header__box .header__warp ul .t.active:before {
  content: "";
  display: inline-block;
  width: 0.2rem;
  height: 0.05rem;
  background: #a10d30;
  position: absolute;
  bottom: -0.1rem;
  left: 50%;
  transform: translate(-50%, -50%);
}

.header__box .lang {
  width: 1rem;
  height: 1.2rem;
  font-size: 0.28rem;
  color: #a10d30;
  line-height: 1.2rem;
  text-align: center;
}

#tabApp {
  width: 100%;
  overflow: hidden;

  .swiper-slide {
    width: auto;
    flex-shrink: 0;
    font-size: 0.32rem;
    font-family: PingFangSC, PingFangSC-Regular;
    font-weight: 400;
    color: #333333;
    line-height: 1rem;
    padding: 0rem 0.15 rem;
    margin: 0 0.2rem;

    &.active {
      font-size: 0.34rem;
      font-family: PingFangSC, PingFangSC-Medium;
      font-weight: bold;
      color: #000000;
    }

    span {
      transition: all 0.3s ease;
      display: block;
    }

    &:first-child {
      padding-left: 0;
    }
  }
}
</style>
